<template>
<div>
<!--  搜索框  -->
  <div class="search">
    <van-row type="flex">
      <van-col span="3" @click="setPath">
        <van-icon name="arrow-left" />
      </van-col>
      <van-col span="20">
        <form action="/">
          <van-search
              @input="putGetdata"
              v-model="value"
              show-action
              placeholder="请输入搜索关键词"
              @search="seaRch"
              @cancel="clear"
          />
        </form>
      </van-col>
    </van-row>
  </div>
<!-- 收索列表头部 -->
  <van-row type="flex" v-if="cruxList.length">
    <van-col span="6">
      <div style="text-align: center">收索历史</div>
    </van-col>
    <van-col span="14"></van-col>
    <van-col span="4"><van-icon name="delete-o" @click="removeCrux" /></van-col>
  </van-row>
<!-- 收索关键字列表展示 -->
   <div >
     <ul class="crux">
       <li @click="setValue(item)" v-for="(item,index) in cruxList" :key="index">{{item}}</li>
     </ul>
   </div>
<!--  列表展示 -->
  <van-row type="flex" style="margin-top:4px">
    <van-col span="6">
      <div :class="['spaNcrux',{'fontRed':fontColor==1}]" @click="fontColor=1">收索发现</div>
    </van-col>
    <van-col span="1" class="spaNcrux">|</van-col>
    <van-col span="6">
      <div :class="['spaNcrux',{'fontRed':fontColor==2}]" @click="fontColor=2">热搜榜</div>
    </van-col>
    <van-col span="7"></van-col>
    <van-col span="4"><van-icon name="eye-o" /></van-col>
  </van-row>

<!-- 关键词列表 -->
  <ul class="list">
    <li v-for="(item,index) in crelList" :class="[{'fontRed':index==Index}]" @click="setcolor(item,index)"><span>{{index+1}}</span>{{item}}</li>
  </ul>


<!-- 收索商品的展示列表 -->
  <van-list v-if="flag">
    <van-cell v-for="item in searchList" :key="item.goods_id" :title="item.goods_name" @click="getGoodId(item.goods_id)" />
  </van-list>
</div>
</template>

<script>
import {Toast} from "vant";
import request from "../api/request";
export default {
  name: "search",
  data(){
    return{
      fontColor:1,
      value:'',
      Index:null,
      flag:false,
      searchList:[],
      crelList:['手机','电脑','年货','键盘','帽子','手套','鞋子','鼠标','飞机']
    }
  },
  methods:{
    setcolor(txt,index){
      this.Index=index;
      this.value=txt;
      this.seaRch()
    },
    setValue(txt){
      this.value=txt;
      this.seaRch()
    },
    getGoodId(id){
      this.$router.push({
        path:`/details/${id}`,
      })
    },
    putGetdata(){
      if(this.value===''){
        this.flag=false;
      }
    },
    //收索
    seaRch(){
      request.get('goods/qsearch',{
        params:{
          query:this.value,
        }
      }).then(res=>{
        this.$store.commit('search/setcrux',this.value)
        let {message}=res.data;
        console.log(message)
        if(message.length==0){
          Toast('正在联系后台管理员,添加此商品！')
          return
        }
        this.searchList=message;
         this.flag=true
      })
    },
    clear(){
      this.value='';
      this.flag=false;
    },
    setPath(){
      this.$router.back()
    },
    //删除所有历史记录
    removeCrux(){
        this.$store.commit('search/setReovem')
    },

  },
  computed:{
    cruxList(){
      return this.$store.getters["search/getcruxList"]
    }
  }
}
</script>

<style scoped lang="less">
.search{position: sticky;top:0;z-index: 999999;background: #fff}
.fontRed{color:red}
.spaNcrux{text-align: center;line-height: 30px}
.crux{padding:0 20px;color: white;overflow:hidden;li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;;float: left;text-align: center;border-radius:20px;background: #cccccc;padding:2px 10px;margin:4px}}
.van-search{position: relative;}
.van-list{position: absolute;top:2.8rem;left:0;z-index:9999;margin: 0 10px}
.van-icon{left:50%;top:50%;transform: translateX(-50%)translateY(-50%)}
.van-icon:before{font-size: 20px;text-align: center;line-height:30px;}
.van-search__action{margin-left: 10px}
.list{padding:0 20px;;li{margin-top:10px;span{display: inline-block;height:20px;width:20px;border-radius:50%;background: #cccccc;color:white;text-align: center;line-height:20px;margin: 0 10px}}}
</style>